<template>
  <div class="app-container">
    <!-- 桌面端左右布局 -->
    <el-row :gutter="10" v-if="!isMobile">
      <el-col :span="showTree ? 6 : 0">
        <CourseTree :title="title" @search="getList1" />
      </el-col>
      <el-col :span="showTree ? 18 : 24">
        <div class="course_content">
          <el-row type="flex" justify="around" style="width: 100%">
            <el-col :span="20">
              <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
                <el-form-item label="考试类别" prop="type">
                  <el-select v-model="queryParams.type" placeholder="请选择.." clearable size="small" @change="handleQuery">
                    <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
                <el-form-item label="考试状态" prop="state">
                  <el-select v-model="queryParams.state" placeholder="请选择.." clearable size="small" @change="handleQuery">
                    <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
                <el-form-item label="阅卷人" prop="manager">
                  <el-select v-model="queryParams.manager" placeholder="请选择.." filterable clearable size="small"
                    @change="handleQuery">
                    <el-option v-for="dict in managerOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="handleQuery" :style="{
                    backgroundColor: theme,
                    borderColor: theme
                  }">搜索</el-button>
                  <el-button size="mini" @click="resetQuery">清空</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-button type="primary" icon="el-icon-plus" :style="{
              backgroundColor: theme,
              borderColor: theme,
              fontWeight: 'bold'
            }" @click="handleAdd()" v-hasPermi="['exam:paper:add']">新增考试</el-button>
            <right-toolbar :showSearch.sync="showSearch" :showTree.sync="showTree" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-table :data="List" style="width: 100%; margin-top: 20px" :show-header="true"
            :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
            @row-dblclick="handleUpdate" v-loading="loading">
            <el-table-column width="220" label="考试信息">
              <template slot-scope="scope">
                <el-row style="width: 100%">
                  <el-col :span="24">
                    <el-row type="flex" justify="left">
                      <el-col :span="24" class="course_name">
                        {{ scope.row.name }}</el-col>
                    </el-row>
                    <el-row style="width: 100%">
                      <el-col :span="24" class="create_time">考试类型 ：{{
                        scope.row.type | ExamTypeFormat
                      }}</el-col>
                    </el-row>
                    <el-row style="width: 100%">
                      <el-col :span="24" class="create_time">
                        考试时限：{{ scope.row.time_limit }}分钟</el-col>
                      <el-col :span="24" class="create_time">
                        开始时间：{{
                          scope.row.start_time | formatDate
                        }}</el-col>
                      <el-col :span="24" class="create_time">
                        结束时间：{{ scope.row.end_time | formatDate }}</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>

            <el-table-column label="考试分类">
              <template slot-scope="scope">
                <span>{{ scope.row.course.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="阅卷人">
              <template slot-scope="scope">
                <span v-if="scope.row.manager!==undefined&&scope.row.manager.name">{{ scope.row.manager.name }}</span>
                <span v-else>暂无</span>
              </template>
            </el-table-column>
            <el-table-column label="考试总分">
              <template>
                <span :style="{ color: theme }">100</span>
              </template>
            </el-table-column>
            <el-table-column label="及格分">
              <template slot-scope="scope">
                <span :style="{ color: theme }">{{
                  scope.row.qualify_score
                }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="!showTree" label="参考人数">
              <template slot-scope="scope">
                <span>{{ scope.row.user.length }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="!showTree" label="参考人员">
              <template slot-scope="scope">
                <span v-for="user in scope.row.user" :key="user.id">{{ user.name }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="考试状态">
              <template slot-scope="scope">
                <span>{{ scope.row.state | stateFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="130">
              <template slot-scope="scope">
                <el-row :gutter="10">
                
                  <el-col :span="1.5">
                    <el-tooltip class="item" effect="dark" content="统计" placement="top">
                      <router-link :to="{
                        path: '/exam/statistics',
                        query: { exam: scope.row.id, examData: scope.row }
                      }" v-hasPermi="['exam:paper:editor']">
                        <i class="el-icon-time" :style="{
                          color: theme,
                          fontSize: '17px'
                        }" /></router-link>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="1.5">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <span @click="handleUpdate(scope.row)" :style="{ color: theme, cursor: 'pointer' }"
                        v-hasPermi="['exam:paper:editor']">
                        <svg-icon icon-class="editor" style="font-size: 17px" />
                      </span>
                    </el-tooltip>
                  </el-col>

                  <el-col :span="1.5" >
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <span @click="handleDelete(scope.row)" :style="{ color: 'red', cursor: 'pointer' }"
                        v-hasPermi="['exam:paper:delete']">
                        <svg-icon icon-class="del" style="font-size: 17px" />
                      </span>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size"
            @pagination="getList" />
        </div>
      </el-col>
    </el-row>

    <!-- 移动端上下布局 -->
    <template v-if="isMobile">
      <!-- 移动端骨架屏 -->
      <mobile-skeleton 
        v-if="loading" 
        :showHeader="false"
        :showSearch="true" 
        :searchFields="3"
        :showButton="true"
        :cardsCount="3"
        :showPagination="total > 0"
      />
      
      <template v-else>
        <!-- 移动端分类树 -->
        <div v-if="showTree" class="mobile-tree-container">
          <div class="mobile-tree-header">
            <span :style="{ color: theme }">{{ title }}</span>
            <el-button 
              type="text" 
              icon="el-icon-arrow-up" 
              @click="showTree = false" 
              :style="{ color: theme }"
              v-if="showTree">
              收起
            </el-button>
          </div>
          <CourseTree :title="title" @search="getList1" />
        </div>
        <div v-else class="mobile-tree-toggle">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-button 
                type="primary" 
                size="small" 
                icon="el-icon-arrow-down"
                @click="showTree = true"
                :style="{
                  backgroundColor: theme,
                  borderColor: theme,
                  width: '100%',
                  marginBottom: '10px',
                  borderRadius: '4px',
                  height: '36px'
                }">
                展开考试分类
              </el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 移动端搜索表单 -->
        <div class="mobile-search-form">
          <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="mobile-form">
            <el-form-item label="考试类别" prop="type">
              <el-select v-model="queryParams.type" placeholder="请选择.." clearable size="small" @change="handleQuery" style="width: 100%">
                <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="考试状态" prop="state">
              <el-select v-model="queryParams.state" placeholder="请选择.." clearable size="small" @change="handleQuery" style="width: 100%">
                <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="阅卷人" prop="manager">
              <el-select v-model="queryParams.manager" placeholder="请选择.." filterable clearable size="small"
                @change="handleQuery" style="width: 100%">
                <el-option v-for="dict in managerOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery" :style="{
                backgroundColor: theme,
                borderColor: theme,
                width: '100%'
              }">搜索</el-button>
              <el-button size="mini" @click="resetQuery" style="width: 100%; margin-top: 10px;">清空</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 移动端操作按钮 -->
        <div class="mobile-action-buttons">
          <el-button type="primary" icon="el-icon-plus" :style="{
            backgroundColor: theme,
            borderColor: theme,
            fontWeight: 'bold',
            width: '100%',
            marginBottom: '10px'
          }" @click="handleAdd()" v-hasPermi="['exam:paper:add']">新增考试</el-button>
        </div>

        <!-- 移动端卡片列表 -->
        <div class="mobile-card-list">
          <el-card 
            v-for="(item, index) in List" 
            :key="index"
            class="mobile-card"
            shadow="hover">
            <!-- 考试名称 -->
            <div class="mobile-card-header">
              <div class="card-title" :style="{ color: theme, fontWeight: 'bold' }">
                {{ item.name }}
              </div>
            </div>
            
            <!-- 考试基本信息 -->
            <div class="mobile-card-info">
              <div class="info-item">
                <span class="info-label">考试类型：</span>
                <span class="info-value">{{ item.type | ExamTypeFormat }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">考试分类：</span>
                <span class="info-value">{{ item.course.name }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">阅卷人：</span>
                <span class="info-value" v-if="item.manager && item.manager.name">{{ item.manager.name }}</span>
                <span class="info-value" v-else>暂无</span>
              </div>
              <div class="info-item">
                <span class="info-label">考试状态：</span>
                <el-tag size="small" :type="getStateTagType(item.state)">{{ item.state | stateFilter }}</el-tag>
              </div>
            </div>
            
            <!-- 展开查看更多信息 -->
            <div v-if="expandedCards.includes(index)" class="mobile-card-detail">
              <div class="info-item">
                <span class="info-label">考试时限：</span>
                <span class="info-value">{{ item.time_limit }}分钟</span>
              </div>
              <div class="info-item">
                <span class="info-label">开始时间：</span>
                <span class="info-value">{{ item.start_time | formatDate }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">结束时间：</span>
                <span class="info-value">{{ item.end_time | formatDate }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">考试总分：</span>
                <span class="info-value" :style="{ color: theme, fontWeight: 'bold' }">100</span>
              </div>
              <div class="info-item">
                <span class="info-label">及格分：</span>
                <span class="info-value" :style="{ color: theme, fontWeight: 'bold' }">{{ item.qualify_score }}</span>
              </div>
              <div class="info-item" v-if="item.user && item.user.length > 0">
                <span class="info-label">参考人数：</span>
                <span class="info-value">{{ item.user.length }}人</span>
              </div>
              <div class="info-item" v-if="item.user && item.user.length > 0">
                <span class="info-label">参考人员：</span>
                <div class="user-list">
                  <el-tag 
                    v-for="user in item.user" 
                    :key="user.id"
                    size="mini"
                    style="margin: 2px 4px 2px 0">
                    {{ user.name }}
                  </el-tag>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="mobile-card-actions">
              <el-button type="text" @click="toggleExpand(index)">
                {{ expandedCards.includes(index) ? '收起' : '查看详情' }}
              </el-button>
              <div>
                <el-tooltip class="item" effect="dark" content="统计" placement="top">
                  <router-link :to="{
                    path: '/exam/statistics',
                    query: { exam: item.id, examData: item }
                  }" v-hasPermi="['exam:paper:editor']">
                    <i class="el-icon-time" :style="{
                      color: theme,
                      fontSize: '17px',
                      marginRight: '10px'
                    }" />
                  </router-link>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <span @click="handleUpdate(item)" :style="{ color: theme, marginRight: '10px', cursor: 'pointer' }"
                    v-hasPermi="['exam:paper:editor']">
                    <svg-icon icon-class="editor" style="font-size: 17px" />
                  </span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <span @click="handleDelete(item)" style="color: red; cursor: pointer"
                    v-hasPermi="['exam:paper:delete']">
                    <svg-icon icon-class="del" style="font-size: 17px" />
                  </span>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </div>
        
        <!-- 移动端分页 -->
        <div class="mobile-pagination" v-if="total > 0">
          <div class="mobile-pagination-wrapper">
            <!-- 第一行：总数和每页条数 -->
            <div class="pagination-row top-row">
              <span class="el-pagination__total">共 {{ total }} 条</span>
              <el-select 
                v-model="queryParams.page_size" 
                size="mini" 
                class="el-pagination__sizes"
                @change="handleSizeChange">
                <el-option
                  v-for="item in [10, 20, 30, 50]"
                  :key="item"
                  :label="`${item}条/页`"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            
            <!-- 第二行：页码导航 -->
            <div class="pagination-row bottom-row">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-size="queryParams.page_size"
                layout="prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>  
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { getExam, ExamCheck, delExam } from "@/api/vadmin/exam/exam";
import { listUser } from "@/api/vadmin/permission/user";
import CourseTree from "@/components/CourseTree";
import MobileSkeleton from "@/components/MobileSkeleton";
export default {
  name: "test",
  components: { CourseTree, MobileSkeleton },
  data() {
    return {
      ids: "",
      showTree: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      courseList: null,
      form: {},

      title: "考试分类",
      queryParams: {
        page: 1,
        page_size: 10,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      typeOptions: [
        {
          dictValue: 1,
          dictLabel: "正常考试",
        },
        {
          dictValue: 2,
          dictLabel: "认证考试",
        },
        {
          dictValue: 3,
          dictLabel: "以考代训",
        },
      ],
      stateOptions: [
        {
          dictValue: 0,
          dictLabel: "未开始",
        },
        {
          dictValue: 1,
          dictLabel: "进行中",
        },
        {
          dictValue: 2,
          dictLabel: "已结束",
        },
      ],
      managerOptions: [],
      List: [],
      courseOptions: [],
      courseName: undefined,
      intervalId: null,
      expandedCards: [],
      screenWidth: document.body.clientWidth,
      mediaQueryList: null
    };
  },
  computed: {
    ...mapState(["settings",'is_superuser','admin']),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
    is_superuser() {
      return this.$store.state.user.is_superuser;
    },
    admin() {
      return this.$store.state.user.admin;
    },
    isMobile() {
      return this.screenWidth < 768;
    }
  },
  filters: {
    stateFilter(val) {
      const state = {
        0: "未开始",
        1: "进行中",
        2: "已结束",
      };
      return state[val];
    },
  },

  created() {
    this.getUsers();
    this.getList();
    this.getExamCheck();
    this.getBasicData();
    // this.dataRefreh(); //列表刷新定时器
  },
  // destroyed() {
  //   // 在页面销毁后，清除计时器
  //   this.clear();
  // },

  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');
    
    // 初始化isMobile状态
    this.screenWidth = document.body.clientWidth;
    
    // 根据isMobile状态设置树的默认显示
    if (this.isMobile) {
      this.showTree = false;
    }
    
    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.screenWidth = document.body.clientWidth;
      
      // 强制组件重新渲染
      this.$forceUpdate();
      
      // 切换到桌面模式时自动显示树
      if (!this.isMobile) {
        this.showTree = true;
      }
    };
    
    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }
    
    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  
  beforeDestroy() {
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    reset() {
      this.queryParams = {
        page: 1,
        page_size: 10,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset();
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 考试状态刷新 */
    getExamCheck() {
      ExamCheck().then((res) => {
        this.getList();
      });
    },
    getBasicData() {
      // 获取阅卷人
      listUser({ page_size: 10000, page: 1 }).then((response) => {
        this.managerOptions = response.results;
      });
    },
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.getExamCheck(); //加载数据函数
      }, 5000); //5秒刷新一次
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getExam(this.queryParams).then((response) => {
        this.List = response.results;
        this.total = response.count;
        this.loading = false;
      });
    },
    /** 查询列表 */
    getList1(data) {
      if (data.id) {
        this.loading = true;
        this.queryParams.course = data.id;
        getExam(this.queryParams).then((response) => {
          this.List = response.results;
          this.total = response.count;
          this.loading = false;
        });
      } else {
        this.queryParams.course = "";
        getExam(this.queryParams).then((response) => {
          this.List = response.results;
          this.total = response.count;
          this.loading = false;
        });
      }
    },

    /*去考试 */
    handlePre(id) {
      this.$router.push({
        name: "Preview",
        params: { id: id },
      });
    },
    /*新增考试 */
    handleAdd() {
      this.$router.push({ name: "Newexam" });
    },
    /*修改试卷 */
    handleUpdate(row) {
      this.$router.push({ name: "Newexam", params: { id: row.id } });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const Ids = row.id || this.ids;
      this.$confirm("是否确认删除考试：" + row.name + "?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delExam(Ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    getUsers() {
      listUser({ page_size: 10000, page: 1 }).then((response) => {
        // console.log("参考人员", response.results);
        this.userOptions = response.results;
      });
    },
    // 切换卡片展开状态
    toggleExpand(index) {
      const position = this.expandedCards.indexOf(index);
      if (position !== -1) {
        this.expandedCards.splice(position, 1);
      } else {
        this.expandedCards.push(index);
      }
    },
    // 获取状态标签类型
    getStateTagType(state) {
      const typeMap = {
        0: 'info',    // 未开始
        1: 'success', // 进行中
        2: 'danger'   // 已结束
      };
      return typeMap[state] || 'info';
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryParams.page_size = val;
      this.getList();
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
}

.mobile-tree-container {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  
  .mobile-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
    
    span {
      font-size: 16px;
      font-weight: bold;
    }
    
    .el-button {
      padding: 5px 12px;
      
      i {
        margin-right: 3px;
      }
    }
  }
}

.mobile-tree-toggle {
  margin-bottom: 15px;

  .el-button {
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    
    i {
      margin-right: 5px;
      font-size: 14px;
    }
  }
}

.mobile-search {
  margin-bottom: 15px;
}

.mobile-form {
  .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;

    .el-form-item__label {
      display: block;
      text-align: left;
      padding: 0 0 5px;
    }

    .el-select, .el-input {
      width: 100%;
    }
  }
}

.mobile-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.mobile-card-view {
  margin-top: 15px;
  
  .empty-data {
    text-align: center;
    padding: 40px 0;
    color: #909399;
    
    i {
      font-size: 40px;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 14px;
    }
  }
  
  .mobile-card {
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.99);
    }
    
    /deep/ .el-card__header {
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .exam-title {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.3;
        flex: 1;
      }
      
      .card-actions {
        display: flex;
        
        i {
          font-size: 18px;
        }
      }
    }
    
    .card-content {
      padding: 10px 0;
      
      .exam-info {
        margin: 10px 0;
        
        .info-item {
          margin: 8px 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          
          .label {
            color: #606266;
            margin-right: 5px;
            font-size: 14px;
          }
          
          .value {
            color: #333;
            font-size: 14px;
          }
          
          .user-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
          }
        }
      }
      
      .exam-details {
        margin-top: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 10px 15px;
        
        .details-section {
          .info-item {
            margin: 8px 0;
          }
        }
      }
      
      .card-toggle {
        text-align: center;
        margin: 12px 0 5px;
        
        .el-button {
          width: 100%;
          padding: 10px 0;
          font-size: 13px;
          
          i {
            margin-left: 5px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

/* 移动端分页样式 */
.mobile-pagination {
  margin: 20px 0 30px;
  
  .mobile-pagination-wrapper {
    width: 100%;
    border-radius: 4px;
    background-color: #f8f9fa;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    
    .pagination-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.top-row {
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 8px;
        justify-content: space-around;
      }
      
      &.bottom-row {
        padding-top: 5px;
      }
      
      .el-pagination__total {
        margin: 5px 5px 5px 0;
        font-size: 13px;
        color: #606266;
        font-weight: normal;
        white-space: nowrap;
      }
      
      .el-pagination__sizes {
        width: auto;
        margin: 5px 0;
        
        /deep/ .el-input__inner {
          height: 28px;
          line-height: 28px;
          font-size: 13px;
          border-radius: 4px;
        }
        
        /deep/ .el-input__suffix {
          right: 5px;
        }
        
        /deep/ .el-select-dropdown__item {
          padding: 0 15px;
          height: 34px;
          line-height: 34px;
          font-size: 13px;
        }
      }
      
      /deep/ .el-pagination {
        padding: 0;
        white-space: normal;
        background: transparent;
        text-align: center;
        width: 100%;
        
        &.is-background {
          .btn-next,
          .btn-prev,
          .el-pager li {
            margin: 3px;
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            font-weight: normal;
            background-color: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
          }
          
          .el-pager li:not(.disabled).active {
            background-color: var(--theme);
            color: #fff;
            border-color: var(--theme);
          }
        }
        
        .el-pagination__jump {
          margin: 5px 0 5px 10px;
          font-size: 13px;
          color: #606266;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          white-space: nowrap;
          
          /deep/ .el-input {
            width: 45px;
            margin: 0 3px;
            
            .el-input__inner {
              height: 28px;
              line-height: 28px;
              padding: 0 3px;
              text-align: center;
              font-size: 13px;
              border-radius: 4px;
            }
          }
        }
        
        button {
          min-width: 28px;
          height: 28px;
          line-height: 28px;
          margin: 3px;
          padding: 0;
          font-size: 12px;
          background-color: #fff;
          color: #606266;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          
          &:disabled {
            color: #c0c4cc;
            background-color: #f4f4f5;
            border-color: #e9e9eb;
          }
          
          &:hover {
            color: var(--theme);
          }
        }
        
        .btn-prev,
        .btn-next {
          padding: 0;
          width: 28px;
          height: 28px;
          line-height: 28px;
        }
        
        .el-pager {
          margin: 0;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          
          li {
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            margin: 3px;
            font-size: 13px;
            font-weight: normal;
            
            &.active {
              font-weight: bold;
            }
            
            &:hover {
              color: var(--theme);
            }
          }
        }
      }
    }
  }
}

/* 超小屏幕特殊处理 */
@media screen and (max-width: 360px) {
  .mobile-pagination {
    .mobile-pagination-wrapper {
      padding: 8px 5px;
      
      .pagination-row {
        &.top-row {
          flex-direction: column;
          align-items: center;
          
          .el-pagination__total {
            margin-bottom: 8px;
          }
        }
        
        /deep/ .el-pagination {
          .el-pager {
            li {
              min-width: 26px;
              height: 26px;
              line-height: 26px;
              margin: 2px;
              font-size: 12px;
            }
          }
          
          button,
          .btn-prev,
          .btn-next {
            width: 26px;
            height: 26px;
            line-height: 26px;
            margin: 2px;
          }
          
          .el-pagination__jump {
            margin: 5px 0;
            
            /deep/ .el-input {
              width: 40px;
              
              .el-input__inner {
                height: 26px;
                line-height: 26px;
              }
            }
          }
        }
      }
    }
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .mobile-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 15px;
    }
  }

  .mobile-search-form {
    margin-top: 10px;
  }

  .mobile-action-buttons {
    margin-top: 10px;
  }

  .mobile-card-list {
    margin-top: 15px;
    
    .mobile-card {
      margin-bottom: 15px;
      
      .mobile-card-header {
        margin-bottom: 15px;

        .card-title {
          font-size: 16px;
          font-weight: bold;
        }
      }
      
      .mobile-card-info {
        margin-bottom: 12px;
        
        .info-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 8px;
          
          .info-label {
            color: #606266;
            font-size: 14px;
            min-width: 80px;
          }
          
          .info-value {
            font-size: 14px;
            word-break: break-all;
          }
          
          .user-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
          }
        }
      }
      
      .mobile-card-detail {
        background-color: #f9f9f9;
        padding: 10px;
        margin: 10px 0;
        border-radius: 4px;
        
        .info-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 8px;
          
          .info-label {
            color: #606266;
            font-size: 14px;
            min-width: 80px;
          }
          
          .info-value {
            font-size: 14px;
            word-break: break-all;
          }
        }
      }
      
      .mobile-card-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #ebeef5;
        
        .el-button {
          padding: 0;
        }
      }
    }
  }
  
  .mobile-pagination {
    margin-top: 20px;
    
    .mobile-pagination-wrapper {
      .pagination-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        
        .el-pagination__sizes {
          width: 100px;
        }
      }
      
      .bottom-row {
        display: flex;
        justify-content: center;
        
        .el-pagination {
          padding: 0;
          text-align: center;
        }
      }
    }
  }
  
  .mobile-tree-container {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .mobile-tree-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 10px;
      
      span {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }

  .mobile-dialog {
    .el-dialog__body {
      padding: 15px !important;
    }
    
    .el-form-item {
      margin-bottom: 15px;
    }
    
    .dialog-footer {
      .el-button {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 10px;
      }
    }
  }
}
</style>